
<@override name="title">
课程添加
</@override>

<@override name="content">
<div class="content">
    <div class="container-fluid">
        <div class="panel panel-default block-body">
            <div class="panel-heading">添加课程</div>
            <form id="courseForm" action="${base}/mergeCourseSection" class="panel-body" method="POST">
                <div class="form-group clearfix">
                    <label class="control-label">课程封面</label>
                    <div class="col-md-10">
                        <img id="imagePreview" style="display: none;width: 150px;height: 72px;background-size: contain;">
                        <input id="file" type="file" style="margin-top: 3px;">
                        <span style="font-size: 12px;">尺寸：365 x 175</span>
                        <input type="hidden" id="coursePicture" name="coursePicture">
                    </div>
                </div>
                <div class="form-group clearfix">
                    <label class="control-label"><span class="tips">*</span>课程名称</label>
                    <div class="col-md-10">
                       <input type="text" id="name" name="name" class="form-control" placeholder="请输入名称">
                    </div>
                </div>
                <div class="form-group clearfix">
                    <label class="control-label">课程方向</label>
                    <div class="col-md-4">
                        <select id="classify" name="classify" class="form-control">
                        <#if map??>
                        <#list map?keys as key>
                        <option value="${key}">${map[key].name}</option>
                        </#list>
                        </#if>
                        </select>
                    </div>
                    <label class="control-label">课程分类</label>
                    <div class="col-md-4">
                        <select id="subClassify" name="subClassify" class="form-control">
                        <#if map??>
                        <#list map?keys as key>
                        <#list map[key].subClassifyList as item>
                        <option parentCode="${item.parentCode}" value="${item.code}">${item.name}</option>
                        </#list>
                        </#list>
                        </#if>
                        </select>
                    </div>
                </div>

                <div class="form-group clearfix">
                    <label class="control-label">难度级别</label>
                    <div class="col-md-4">
                        <select name="level" class="form-control">
                            <option value="1">初级</option>
                            <option value="2">中级</option>
                            <option value="3">高级</option>
                        </select>
                    </div>
                    <label class="control-label">推荐权重</label>
                    <div class="col-md-4">
                        <input type="number" value="0" oninput="if(value<0)value=0;if(value>10000)value=10000" class="form-control">
                    </div>
                </div>

                <div class="form-group clearfix">
                    <label class="control-label">是否免费</label>
                    <div class="col-md-4">
                        <select name="free" class="form-control">
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                    <label class="control-label">价格</label>
                    <div class="col-md-4">
                        <input type="number" name="price" value="0" oninput="if(value<0)value=0;if(value>100000)value=100000" class="form-control">
                    </div>
                </div>

                <div class="form-group clearfix">
                    <label class="control-label">课程类型</label>
                    <div class="col-md-4">
                        <select name="type" class="form-control">
                            <option value="0">录播课</option>
                            <option value="1">直播课</option>
                        </select>
                    </div>
                    <label class="control-label">直播时间</label>
                    <div class="col-md-4">
                        <input type="text" id="livetime" name="livetime" readonly="readonly" class="form-control" style="background-color:#FFF;">
                    </div>
                </div>

                <div class="form-group clearfix">
                    <label class="control-label">描述</label>
                    <div class="col-md-4">
                        <textarea name="brief" rows="5" cols="40" class="form-control"></textarea>
                    </div>
                </div>

            </form>
        </div>

        <div class="row-fluid">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab">目录</a>
                </li>
                <li><button onclick="addCourseSection()" class="btn btn-default">+添加章节</button></li>
                <li><button onclick="saveCourseSections()" class="btn btn-primary">保存课程和章节</button></li>
            </ul>
        </div>

        <div id="courseTabContent" class="tab-content" style="padding:10px;">

        </div>

    </div>
</div>

<!-- 专门为复制div使用 start-->
<div id="courseSection4Clone">
    <div sid="chapter-clone" class="chapter-section-clone" style="display:none;">
        <div class="form-group clearfix">
            <label class="control-label">章名称</label>
            <div class="col-md-8">
                <input type="text" class="form-control" name="chaptName" placeholder="请输入名称">
            </div>
            <div class="col-md-1">
                <button onclick="deleteChapt(this)" class="btn btn-default">- 删除章</button>
            </div>
            <div class="col-md-1">
                <button onclick="addSection(this)" class="btn btn-default">+ 添加节</button>
            </div>
        </div>

        <div id="section4Clone">
            <div sid="section-clone" class="form-group clearfix">
                <label class="control-label" style="margin-left:60px;">节信息</label>
                <div class="col-md-7">
                    <input type="text" class="form-control" name="sectionName" placeholder="请输入节名称">
                    <input type="text" class="form-control" name="videoUrl" style="margin: 5px 0px;" placeholder="请输入视频链接">
                    <input type="number" class="form-control" name="time" placeholder="请输入时长（分钟）">
                </div>
                <div class="col-md-1">
                    <button onclick="deleteSection(this)" class="btn btn-default">- 删除节</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 专门为复制div使用 end -->

<script type="text/javascript">
    $(function () {
        $('#classify').change(function(){
            let classify = $('#classify').val();
            filterSubClassify(classify);
        })
        //分类过滤一次
        filterSubClassify($('#classify').val());
        //课程图片的监听
        coursePictureFielChange();
        //时间选择插件加载
        laydate.render({
            elem: '#livetime',
            type: 'datetime',
            value: _os.dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
        })
    })

    //添加章节按钮点击事件
    function addCourseSection() {
        let divHtml = $('#courseSection4Clone').clone().html();
        divHtml = divHtml.replaceAll("display:none;","display:block;")
        $('#courseTabContent').append(divHtml);
    }

    //添加节 按钮点击事件
    function addSection(el) {
        let divHtml = $('#section4Clone').clone().html();
        $(el).parent().parent().parent().append(divHtml);
    }

    //删除章节 按钮点击事件
    function deleteChapt(el) {
        $(el).parent().parent().parent().remove();
    }

    //删除节 按钮点击事件
    function deleteSection(el) {
        $(el).parent().parent().remove();
    }

    //获取前端的章节中的数据
    function getCourseSectionData(){
        let chaptSections = [];
        let chaptDivs = $('#courseTabContent').find("div[sid='chapter-clone']");
        //章
        $.each(chaptDivs,function (i, item) {
            let chaptName = $(item).find("input[name='chaptName']").val();
            if(!_os.isEmpty(chaptName)){
                let chaptObj = {};
                chaptObj.chaptName = chaptName;
                chaptObj.sections = [];

                //小节
                let sectionDivs = $(item).find("div[sid='section-clone']");
                $.each(sectionDivs, function (j, sItem) {
                    let sectionName = $(sItem).find("input[name='sectionName']").val();
                    let videoUrl = $(sItem).find("input[name='videoUrl']").val();
                    let time = $(sItem).find("input[name='time']").val();
                    if(_os.isEmpty(time)){
                        time = 0;
                    }
                    if(!_os.isEmpty(sectionName)){
                        let sectionObj = {};
                        sectionObj.name = sectionName;
                        sectionObj.videoUrl = videoUrl;
                        sectionObj.time = time;

                        chaptObj.sections.push(sectionObj);
                    }
                })

                chaptSections.push(chaptObj);
            }
        })
        return chaptSections;
    }

    //保存课程信息到数据库
    function saveCourseSections() {
        let name = $('#name').val();
        if(_os.isEmpty(name)){
            Modal.alert("课程名称不能为空");
        }else{
            let chaptSectionData = getCourseSectionData();
            let chaptSections = JSON.stringify(chaptSectionData);

            $('#courseForm').ajaxSubmit({
                dataType:'json',
                data:{'chaptSections':chaptSections},
                success: function(resp){
                    if(resp.errcode == 0){
                        window.location.href="${base}/manageCourse"
                    }else{
                        Modal.alert("保存失败");
                    }
                },
                error: function(resp){
                    Modal.alert("保存失败");
                }
            })
        }
    }

    //课程图片改变监听
    function coursePictureFielChange() {
        $('#file').change(function () {
            let f = $('#file').val();
            if(_os.photoValid(f)){
                let file = $('#file').get(0).files[0];
                _os.processImageFile(file,function (result) {
                    $('#imagePreview').show();
                    $('#imagePreview').css('background-image','url('+result.image+')')
                    $('#coursePicture').val(result.data);
                })
            }else{
                Modal.alert("图片格式不正确(.png|.jpg|.jpeg)")
            }
        })
    }
    //过滤课程分类
    function filterSubClassify(classify){
        let flag = true;
        $('#subClassify').find('option').each(function(i,item){
            if($(item).attr('parentCode') == classify){
                if(flag){
                    $('#subClassify').val($(item).attr('value'));
                    flag = false;
                }
                $(item).show();
            }else{
                $(item).hide();
            }
        })
    }

</script>

</@override>

<@extends name="_manage_base.html" />
